<template>
<div>


         <el-upload class="upload-demo"  
              drag action="#" 
             :auto-upload="false"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture">
               
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                  
               <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb
                                                       <p>点击图片即可上传</p>
               </div>
                      
          </el-upload>
         
        <router-link to="/admin/manageProduct"> <el-button type="primary" >返回</el-button></router-link>
       
 

</div>
</template>

<script>

export default {
  name:"ProductImage",
  data() {
      return {
        id:'',
        fileList:[],
  
       
      };
    },
    methods: {

        getImageId:function(){
          this.id=this.$route.params.imageId;
          console.log(this.id)
        },


        handleRemove:function(file,fileList){
          console.log(file,fileList);
        },

        handlePreview:function(file){
          //将id和img放到newfile中让后端接收
          let imageId=this.id;
          let newfile=new FormData();
          newfile.append("img",file.raw);
          newfile.append("id",imageId)
          console.log(newfile.get("img"))
          let config={
            headers:{
              "Content-Type":"application/octet-stream;charset=utf-8"
            }
          };
          
          this.$axios.post("http://localhost:8080/BMS/product/image/upload",newfile,config).then(res=>{
            if(res!=0){
              alert("上传成功")
           this.$router.push({
             path:'/admin/manageProduct'
           })}
           else{
             alert("上传失败")
           }
          }
          );
          console.log(file)

        }

    },mounted(){
      this.getImageId()
    }
}
</script>

<style>

</style>